<template>
    <div >
        
        <el-form>
            <div v-for="(item,index) in WholeSurvey" :key="index">
                <!-- 一个问卷 -->
                <el-form-item >
                    <div class="bg">
                        <div>
                            <!-- span表示占据的宽度 -->
                            <el-col  :span="4">
                                <h4>{{item.survey.surTitle}}</h4>
                            </el-col>
                            <el-col :span="4">
                                <p>ID:{{item.survey.surId}}</p>
                            </el-col>  
                            <el-col :span="4">
                                <p>状态: {{item.survey.state==2?'已发布':'未发布'}}</p>
                            </el-col> 
                            <el-col :span="6">
                                <p>{{item.survey.surDate}}</p>
                            </el-col> 
                            <el-col :span="6">
                                <p>答卷数：{{item.survey.surNum}}</p>
                            </el-col>                         
                        </div>
                        <br/><br/>
                        <div class="function">
                            <el-button class="button" @click="edit(item.survey.surId,item)">设计问卷</el-button>
                            <el-button class="button" @click="download(item.survey.state,item.survey.surId)">分析下载</el-button>
                            <el-button class="button" @click="release(item.survey.surId)">发布</el-button>
                            <el-button class="button" @click="cancel(item.survey.surId)">取消发布</el-button>
                            <el-button class="button" @click="del(item.survey.surId)">删除该问卷</el-button>
                        </div>                  
                    </div><br/><br/>

                </el-form-item>                
            </div>
        </el-form>
    </div>
</template>

<script>
export default{
    data () {
        return {
            userName:'',
            //从后台获取的问卷信息
            WholeSurvey:{ 
            }            
        }
    },
    methods: {
        edit(surId,item){
            //问卷Id
            //console.log(surId);
            if(item.survey.state==1){
                sessionStorage.setItem("surId",surId);
                console.log(sessionStorage.surId);
                this.$router.push('edit');
            }
            else if(item.survey.state==2){
                //alert("该问卷已经发布，不能再进行修改");
                this.$alert('该问卷已经发布，不适合再进行修改，建议重新设计一份问卷。', '提示', {
                confirmButtonText: '知道了',})
            }
            else{
                //alert("该问卷曾经发布过，不适合进行修改，，建议重新设计一份问卷。");
                this.$alert('该问卷曾经发布过，不适合进行修改，，建议重新设计一份问卷。', '提示', {
                confirmButtonText: '知道了',})                
            }
            
        },
        //分析下载
        download(state,surId){
            this.$router.push('tablepage/'+surId);
        },
        //发布问卷
        release(surId){
            this.$axios.post('http://localhost:8082/home/release',surId,{
            headers: {'Content-Type': 'application/json; charset=UTF-8'}})
            .then(res=>{
                //console.log(this.WholeSurvey);
                 console.log(res.data);
                 //跳转到feedbackpage页面
                 this.$router.push('feedbackpage/'+surId);
            });
            
        },
        //取消发布
        cancel(surId){
            this.$axios.post('http://localhost:8082/home/cancel',surId,{
            headers: {'Content-Type': 'application/json; charset=UTF-8'}})
            .then(res=>{
                //console.log(this.WholeSurvey);
                 console.log(res.data)
            });
             this.$router.go(0); 
        },
        del(surId){
            console.log(surId);
            this.$axios.post('http://localhost:8082/home/del',surId,{
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
                }
        })
            .then(res=>{
                
                //console.log(this.WholeSurvey);
                 console.log(res.data)
            });
            //重新加载页面，但据说不推荐这样做
            this.$router.go(0);           
        },

        query(){
            console.log(this.userName);
        }
    },
    created () {
        this.userName=sessionStorage.userName;
        //console.log(this.userName);
        //创建时就从后台获取所有数据
        this.$axios.post('http://localhost:8082/home/queryRelease',this.userName,{
            headers: {
                'Content-Type': 'application/json; charset=UTF-8'
                }
        }).then(res=>{
            this.WholeSurvey=res.data.data.WholeSurvey;
             console.log(this.WholeSurvey);
            // console.log(res.data.data.WholeSurvey)
        })
    }
}
</script>
<style>
.left{
    margin-left: 0px;
    background: rgb(150, 95, 95);
    display: inline;
    text-align: left;
    width: 30px;
    left: 20px;
}
.right{
    margin-left: 0px;
    background: rgb(150, 95, 95);
    display: inline;
    text-align: right;
    width: 500px;
}
.bg{
    background-color:rgb(148, 223, 87);
    height:100px;
}
.function{
    position:static;
    right: 200px;
    background-color:rgb(168, 154, 168);
}
.button{
    background-color:rgb(168, 154, 168);
}
</style>